<template>
  <div>
    <el-dialog
        @close="handleDialogClose"
        title="更改班次"
        :close-on-click-modal="false"
        :visible="classesSelectVisible"
        width="550px"
    >
      <el-form :model="formData" ref="formRef">

        <el-form-item label="更改考勤班次">

          <el-select v-loading="classesListLoading" v-model="formData.weekId" placeholder="请选择">
            <el-option
                v-for="item in classesList"
                :key="item.id"
                :label="item.name+'：'+item.time0 + '~'+ item.time1"
                :value="item.id">
            </el-option>
          </el-select>

          <!-- 使用 scoped slot 渲染 el-select 组件 -->
<!--          <el-select @change="" v-model="formData.weekId" placeholder="请选择">-->
<!--            <el-option-group-->
<!--                v-for="group in classesList"-->
<!--                :key="group.label"-->
<!--                :label="group.label">-->
<!--              <el-option-->
<!--                  v-for="item in group.options"-->
<!--                  :key="item.id"-->
<!--                  :label="item.name"-->
<!--                  :value="item.id">-->
<!--                <span style="float: left">{{ item.name }}</span>-->
<!--                <span v-if="item.id!=-100" style="float: right; color: #8492a6; font-size: 13px">{{ item.time0 + "~"+ item.time1}}</span>-->
<!--              </el-option>-->
<!--            </el-option-group>-->
<!--          </el-select>-->
        </el-form-item>

      </el-form>

      <footer style="text-align: center;">
        <el-button size="small" @click="handleDialogClose">取消</el-button>
        <el-button size="small" type="primary" @click="save" :disabled="!classesList.length">确定</el-button>
      </footer>

    </el-dialog>

  </div>
</template>

<script>
import {workingscheduleGetlist} from "@/api/pcmj/bcgl";
export default {
  name: "classesSelect",
  props:{
    tableRow:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    classesSelectVisible:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      classesListLoading:false,
      formData:{
        weekId:null,
      },
      classesList:[],
    }
  },
  methods: {
    save(){
      var weekName=""
      this.classesList.map(item=>{
        if (item.id==this.formData.weekId){
          weekName= item.name+"："+item.time0+" ~ "+item.time1
        }
      })
      this.$emit("classesChangeEvent",{
        weekId:this.formData.weekId,
        weekName,
        id:this.tableRow.id-1,
        desc:this.tableRow.name
      })
      this.handleDialogClose()
    },
    workingscheduleGetlist(){
      this.classesListLoading=true
      workingscheduleGetlist({
        pageNumber:1,
        pageSize:999,
        name:null
      }).then(res=>{
        if (res.code == 200) {
          this.classesList=res.data.values
          this.formData.weekId=this.tableRow.weekId
        }
      }).catch().finally(()=>{
        setTimeout(()=>{
          this.classesListLoading=false
        },500)
      })
    },
    handleDialogClose(){
      this.$parent.classesSelectVisible=false
    }
  },
  mounted() {
    // 获取班次列表
    this.workingscheduleGetlist()

    console.log('tableRow',this.tableRow);
  }
}
</script>

<style scoped>

</style>
